<template>
    <div class="right_wrap">
        <div class="homeright_model lh1 t_l ba_f bor_rad5 pad_25">
            <h2 class="color_3 fon_16 wei" title="">云贝-餐饮多端</h2>
            <div class="side-bd">
                <div class="color_3 fon_14 mar_t20">服务热线：4008-118-115</div>
                <div class="flex-bet fon_12 mar_t20">
                    <div class="color_9">已使用314天</div>
                    <div class="subjectcolor">剩51天</div>
                </div>
                <div class="mar_t10">
                    <el-progress :percentage="percentage"
                                 :color="customColor"></el-progress>
                </div>
                <div class="mar_t20 ljxy">
                    <el-button type="primary">立即续约</el-button>
                </div>
            </div>
        </div>
        <div class="ba_f mar_t20 bor_rad5">
            <div class="banner ">
                <img alt="logo" src="../../assets/img/index/banner.png" class="yb_banner"/>
            </div>
            <div class="flex bor_b_e4 moder flex-y-center">
                <div><img alt="logo" src="../../assets/logo.png" class="yb_code mar_r15"/></div>
                <div>
                    <div class="fon_14">关注云贝公众号</div>
                    <div class="color_9">掌握一手产品动态</div>
                </div>
            </div>
            <div class="flex bor_b_e4 moder flex-y-center">
                <div><img alt="logo" src="../../assets/img/index/zxkf.png" class="yb_code mar_r15"/></div>
                <div class="t_l">
                    <div class="fon_14">在线客服</div>
                    <div class="color_9">电话：0571-8998 8848</div>
                </div>
            </div>
            <div class="bor_b_e4">
                <div class="flex moder flex-y-center">
                    <div><img alt="logo" src="../../assets/img/index/zmzxkf.png" class="yb_code mar_r15"/></div>
                    <div class="t_l">
                        <div class="fon_14">桌面在线客服</div>
                        <div class="color_9">及时应答，在线咨询</div>
                    </div>
                </div>
                <div class="flex moder flex-y-center">
                    <div><img alt="logo" src="../../assets/img/index/ydkhd.png" class="yb_code mar_r15"/></div>
                    <div class="t_l">
                        <div class="fon_14">移动客户端</div>
                        <div class="color_9">使用手机/pad管理店铺</div>
                    </div>
                </div>
            </div>
            <div class="ba_f bor_b_e4 moder t_l">
                <p class="wei">产品动态</p>
                <div>三合一的小鹅通助手APP，来了！全...</div>
                <div>三合一的小鹅通助手APP，来了！全...</div>
                <div>三合一的小鹅通助手APP，来了！全...</div>
                <div>三合一的小鹅通助手APP，来了！全...</div>
            </div>
            <div class="ba_f moder t_l">
                <p class="wei">企业资讯</p>
                <div>三合一的小鹅通助手APP，来了！全...</div>
                <div>三合一的小鹅通助手APP，来了！全...</div>
                <div>三合一的小鹅通助手APP，来了！全...</div>
                <div>三合一的小鹅通助手APP，来了！全...</div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "RightBar",
        data() {
            return {
                percentage: 80,
                customColor: '#FE6C58',
            }
        },
        methods: {}
    };
</script>
<style lang="scss">
    .right_wrap {
        /*float: right;*/
        margin-left: 30px;
        /*position: absolute;*/
        /* z-index: -100 !important;*/
        /*right: 28Px;*/
        /*top: 94Px;*/
        width: 240Px;
        /*height: 100%;*/

        .banner {
            width: 240px;
            height: 140px;
            background: #aab2bd;
        }

        .moder {
            margin: 20px 10px;
            padding: 0 0 20px 10px;

            .yb_code {
                width: 42px;
                height: 42px;
            }
        }
    }

    .homeright_model .ljxy .el-button {
        width: 190px;
    }
    .yb_banner{
        width: 240px;
        height: 140px;
    }
</style>